<template>
  <div>
    <div class="back" @click="goBack">
      <van-icon color="#fff" name="arrow-left" />
    </div>
    <div class="header-btn">
      <div class="content-title">收货地址</div>
    </div>
    <div class="header">
      <van-icon name="location" class="header-icon" />
      <div class="address">
        <div class="address-title">{{ city }}</div>
        <van-icon name="arrow" />
      </div>
      <div class="again" @click="againAdd">重新定位</div>
    </div>
    <!-- 没有地址 -->
    <div v-if="isAdd" class="main-noadd">
      <img src="./images/addNo.png" />
      <div class="noadd">暂无地址信息，请添加地址～</div>
    </div>
    <!-- 有地址 -->
    <div v-else class="main-add">
      <ul class="address-content">
        <van-swipe-cell v-for="(item, index) in address" :key="index">
          <li class="address-item">
            <div class="top">
              <div class="top-title">
                <van-tag
                  class="default"
                  color="#efe9d4"
                  text-color="#f7d149"
                  v-if="item.default"
                  >默认</van-tag
                >
                <span class="add-titile">{{ item.address }}</span>
              </div>
              <div class="top-edit" @click="toMapEdit(index)">
                <van-icon name="setting-o" class="edit-icon" />
              </div>
            </div>
            <div class="bottom">
              <div class="username">{{ item.nick }}</div>
              <div class="phone">{{ item.phone }}</div>
            </div>
          </li>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delAddress(index)"
            />
          </template>
        </van-swipe-cell>
      </ul>
    </div>
    <div class="bottom-btn">
      <div class="address-btn" @click="toMapAdd">
        <van-icon name="plus" class="icon-btn" />
        <span>添加地址</span>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetAddress, updateAddress } from "@/api";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      isAdd: false,
      city: "",
    };
  },
  computed: {
    ...mapGetters("user", ["address"]),
  },
  methods: {
    toMapAdd() {
      this.$router.push("/center/address/addoreditMap/地址添加");
    },
    toMapEdit(index) {
      this.$router.push(`/center/address/addoreditMap/地址编辑?index=${index}`);
    },
    againAdd() {
      this.$router.push("/center/address/search");
    },
    async getAddress() {
      let id = this.$store.state.login.userInfo.id;
      let res = await reqGetAddress({ id });
      if (res.status === 200) {
        this.$store.state.user.allUserInfo.address = JSON.parse(
          res.data.address
        );
        let len = JSON.parse(res.data.address).length;
        if (len < 1) {
          this.isAdd = true;
        } else {
          this.isAdd = false;
        }
      }
    },
    async delAddress(index) {
      let id = this.$store.state.login.userInfo.id;
      let res = await reqGetAddress({ id });
      let arrAdd = JSON.parse(res.data.address);
      arrAdd.splice(index, 1);
      let strAdd = JSON.stringify(arrAdd);
      let obj = {
        id: this.$store.state.login.userInfo.id,
        address: strAdd,
      };
      let updateRes = await updateAddress(obj);
      if (updateRes.status === 200) {
        this.$router.go(0);
        Toast("删除成功");
      } else {
        Toast("删除失败");
      }
    },
    goBack() {
      if (this.$route.params.backWhere === 'Pay') {
        this.$router.push("/pay");
        return;
      }
      this.$router.back();
    },
    // 获取ip所在城市、区等信息
    getIPCity() {
      var data = {
        key: "YDPBZ-EPDLJ-72HF5-K4EU4-JI5I5-NAFBI", //密钥
      };
      var url = "https://apis.map.qq.com/ws/location/v1/ip"; //腾讯地理位置信息接口
      data.output = "jsonp"; // 解决跨域问题
      this.$jsonp(url, data)
        .then((res) => {
          // console.log('IP所在市',res.result.ad_info.city);
          // console.log('ip所属区',res.result.ad_info.district);
          this.city = res.result.ad_info.city + res.result.ad_info.district;
          return res;
        })
        .catch((error) => {});
    },
  },
  mounted() {
    this.getAddress();
    // 获取ip所在城市
    this.getIPCity();
  },
};
</script>

<style>
.delete-button {
  height: 100%;
}
</style>

<style lang="less" scoped>
.back {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 30px;
  top: 10px;
  left: 10px;
  z-index: 999;
}
.default {
  border-radius: 10px;
  font-size: 12px;
  margin-right: 10px;
}
.header-btn {
  z-index: 99;
  height: 50px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #e8e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  .content-title {
    font-size: 18px;
    font-weight: 600;
  }
}
.header {
  z-index: 999;
  height: 50px;
  width: 100%;
  background-color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  position: fixed;
  top: 50px;
  .header-icon {
    width: 20px;
    color: #143ea9;
    font-size: 18px;
    margin-right: 10px;
  }
  .address {
    display: flex;
    width: 60%;
    .address-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .again {
    width: 60px;
    font-size: 13px;
    color: #143ea9;
    margin-left: 40px;
  }
}
.main-noadd {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 110px 10px 10px;
  height: 100vh;
  box-sizing: border-box;
  img {
    width: 100px;
    height: 100px;
    margin: 100px 0 20px;
  }
  .noadd {
    font-size: 13px;
    color: #666666;
  }
}
.main-add {
  padding: 110px 10px 70px;
  height: 100vh;
  box-sizing: border-box;
  overflow: auto;
  .address-content {
    background: #fff;
    // height: 900px;
    border-radius: 15px;
    overflow: hidden;
    padding: 0 0 0 15px;
    .address-item {
      background-color: #fff;
      height: 100px;
      padding: 15px 15px 15px 0;
      box-sizing: border-box;
      border-bottom: 1px solid lightgrey;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        display: flex;
        justify-content: space-between;
        .top-title {
          // display: flex;
          .add-titile {
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
          }
        }
        .top-edit {
          margin-left: 10px;
          .edit-icon {
            font-size: 18px;
            color: #666666;
          }
        }
      }
      .bottom {
        display: flex;
        font-size: 14px;
        color: #666666;
        .username {
          margin-right: 15px;
        }
      }
    }
  }
}

.bottom-btn {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .address-btn {
    width: 90%;
    height: 40px;
    border-radius: 20px;
    background-color: #143ea9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    .icon-btn {
      margin-right: 10px;
    }
  }
}
</style>
